<style rel="stylesheet/scss" lang="scss" scoped>
    .model-containter {
        display: flex;
        flex: 1;
        min-height: 100%;
        padding: 20px;
        box-sizing: border-box;
        flex-direction: column;
        .content {
            display: flex;
            height: 100%;
            flex-direction: column;
            .content-head {
                width: 100%;
                height: 200px;
                padding: 20px 10px;
                background: #f0f0f0;
                border: 1px solid #E5E5E5;
                .head-tit {
                    width: 100%;
                    height: 30px;
                    display: flex;
                    line-height: 40px;
                    .text-q {
                        color: #409EFF;
                    }
                }
                .m-t-30 {
                    margin-top: 30px;
                }
            }
        }
		.td-pro{
			width: 100%;
			height: 50px;
		}
		.table-box{
			padding: 10px;
			height: 650px;
			margin-top: 20px;
			overflow: auto;
			border: 1px solid #E5E5E5;
		}
		.table-b{
			border: 1px solid #E5E5E5;
			td{
				text-align: center;
				color: #101010;
			}
			th{
				color: #666;
			}
		}
    }
</style>
<template>
    <div class="model-containter">
        <!--tabs 公用tab -->
		<tabs ></tabs>
        <div class="content">
            <div class="content-head">
                <div class="head-tit">
                    <template>
                        <el-select v-model="value" placeholder="请选择">
                            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                            </el-option>
                        </el-select>
                    </template>
                    <el-input placeholder="店名关键字" maxLength="20" style="width: 150px;" class="m-l-10"></el-input>
                    <span class="m-l-10">下单时间:</span>
                    <el-input placeholder="店名关键字" maxLength="20" style="width: 150px;" class="m-l-10"></el-input>
                    <span class="m-l-10">至:</span>
                    <el-input placeholder="店名关键字" maxLength="20" style="width: 150px;" class="m-l-10"></el-input>
                    <span class="m-l-10 text-q">最近7天</span>
                    <span class="m-l-10 text-q">最近30天</span>
                </div>
                <div class="head-tit m-t-30">
                    <span class="text-q">商品名称:</span>
                    <el-input placeholder="店名关键字" maxLength="20" style="width: 150px;" class="m-l-10"></el-input>
                    <span class="m-l-10 text-q">订单状态:</span>
                    <el-input placeholder="店名关键字" maxLength="20" style="width: 150px;" class="m-l-10"></el-input>
                </div>
                <el-row class="m-t-30">
                    <el-button type="primary">筛选</el-button>
                    <el-button type="primary">重置</el-button>
                    <el-button type="primary">导出excel</el-button>
                </el-row>
            </div>
            <div class="table-box">
                <table cellpadding="0" cellspacing="0" border="1" class="table-b">
                    <tr>
                        <th width="300">商品</th>
                        <th width="150">单价/数量</th>
                        <th width="156">总金额</th>
                        <th width="300">买家</th>
                        <th width="109">下单时间</th>
                        <th width="130">地址</th>
                        <th width="80">订单状态</th>
						<th width="130">操作</th>
                    </tr>
					<template>
						<tr>
							<td colspan="8">
								订单号: 11515611515115156
							</td>
						</tr>
						<tr>
							<td colspan="2">
								<div class="td-pro">商品</div>
								<div class="td-pro">商品</div>
								<div class="td-pro">商品</div>
							</td>
							<td>
								1
							</td>
							<td>
								1
							</td>
							<td >
								1
							</td>
							<td >
								1
							</td>
							<td >
								1
							</td>
							<td >
								1
							</td>
						</tr>
					</template>
					<template>
						<tr>
							<td colspan="8">
								订单号: 11515611515115156
							</td>
						</tr>
						<tr>
							<td colspan="2">
								<div class="td-pro">商品</div>
								<div class="td-pro">商品</div>
								<div class="td-pro">商品</div>
							</td>
							<td>
								1
							</td>
							<td>
								1
							</td>
							<td >
								1
							</td>
							<td >
								1
							</td>
							<td >
								1
							</td>
							<td >
								1
							</td>
						</tr>
					</template>
					<template>
						<tr>
							<td colspan="8">
								订单号: 11515611515115156
							</td>
						</tr>
						<tr>
							<td colspan="2">
								<div class="td-pro">商品</div>
								<div class="td-pro">商品</div>
								<div class="td-pro">商品</div>
							</td>
							<td>
								1
							</td>
							<td>
								1
							</td>
							<td >
								1
							</td>
							<td >
								1
							</td>
							<td >
								1
							</td>
							<td >
								1
							</td>
						</tr>
					</template>
					<template>
						<tr>
							<td colspan="8">
								订单号: 11515611515115156
							</td>
						</tr>
						<tr>
							<td colspan="2">
								<div class="td-pro">商品</div>
								<div class="td-pro">商品</div>
								<div class="td-pro">商品</div>
							</td>
							<td>
								1
							</td>
							<td>
								1
							</td>
							<td >
								1
							</td>
							<td >
								1
							</td>
							<td >
								1
							</td>
							<td >
								1
							</td>
						</tr>
					</template>
					
                </table>
            </div>
        </div>
    </div>
</template>
<script>
    import tabs from '@/components/tabs/tabs.vue'
    export default {
        data() {
            return {
                options: [{
                    value: '选项1',
                    label: '黄金糕'
                }, {
                    value: '选项2',
                    label: '双皮奶'
                }, {
                    value: '选项3',
                    label: '蚵仔煎'
                }, {
                    value: '选项4',
                    label: '龙须面'
                }, {
                    value: '选项5',
                    label: '北京烤鸭'
                }],
                value: '',
            }
        },
        components: {
            tabs
        }
    }
</script>
